<template>
  <div class="workmain">
      <div class="work">
          <itemList class="itemList">
             <header class="newHeader">
                <div class="mycode">{{code==2?'安全指标':'安全预警'}}</div>
                <div class="editMsg" @click="savecode">保存</div>               
             </header>
             <div class="itemT itemTnew">
                <div class="newlist" 
                     v-for="(item,index) in menuList"
                     :key="index">
                    <div class="Itop">
                        <img :src="item.ImgUrl"/>
                        <img class="number-show" 
                             src="../../assets/remove.png"
                             @click="deletecode(item)">
                    </div>
                    <p class="Ibottom">
                        {{item.Name}}
                    </p>
                </div>
                <!-- <div class="newlist">
                    <div class="Itop">
                        <img src="../../../static/images/index/icon1.png"/>
                        <img class="number-show" src="../../assets/remove.png">
                    </div>
                    <p class="Ibottom">
                        违章超三次人员
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop">
                        <img src="../../../static/images/index/icon1.png"/>
                        <img class="number-show" src="../../assets/remove.png">
                    </div>
                    <p class="Ibottom">
                        不受控重大危险源
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop">
                        <img src="../../../static/images/index/icon1.png"/>
                        <img class="number-show" src="../../assets/remove.png">
                    </div>
                    <p class="Ibottom">
                        未整改重大隐患
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop">
                        <img src="../../../static/images/index/icon1.png"/>
                        <img class="number-show" src="../../assets/remove.png">
                    </div>
                    <p class="Ibottom">
                        不受控重大危险源
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop">
                        <img src="../../../static/images/index/icon1.png"/>
                        <img class="number-show" src="../../assets/remove.png">
                    </div>
                    <p class="Ibottom">
                        违章超三次人员
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop">
                        <img src="../../../static/images/index/icon1.png"/>
                        <img class="number-show" src="../../assets/remove.png">
                    </div>
                    <p class="Ibottom">
                        未整改重大隐患
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop">
                        <img src="../../../static/images/index/icon1.png"/>
                        <img class="number-show" src="../../assets/remove.png">
                    </div>
                    <p class="Ibottom">
                        违章超三次人员
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop">
                        <img src="../../../static/images/index/icon1.png"/>
                        <img class="number-show" src="../../assets/remove.png">
                    </div>
                    <p class="Ibottom">
                        未整改重大隐患
                    </p>
                </div> -->
             </div>
          </itemList>
           <itemList class="itemList">
             <header class="newHeader">
                <div class="mycode">{{code==2?'全部指标':'全部预警'}}</div>
             </header>
             <div class="itemT itemTnew">
                <div class="newlist" 
                     v-for="(item,index) in totalList"
                     :key="index"
                     @click="changeflag(item.Code)">
                    <div class="Itop">
                        <img :src="item.ImgUrl"/>
                        <img class="number-show" v-if="showcode(item.Code)" src="../../assets/remove.png">
                        <img class="number-show" v-if="!showcode(item.Code)" src="../../assets/add.png">
                    </div>
                    <p class="Ibottom">
                        {{item.Name}}
                    </p>
                </div>
                <!-- <div class="newlist">
                    <div class="Itop">
                        <img src="../../../static/images/index/icon1.png"/>
                        <img class="number-show" src="../../assets/remove.png">
                    </div>
                    <p class="Ibottom">
                        不受控重大危险源
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop">
                        <img src="../../../static/images/index/icon1.png"/>
                        <img class="number-show" src="../../assets/remove.png">
                    </div>
                    <p class="Ibottom">
                        违章超三次人员
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop">
                        <img src="../../../static/images/index/icon1.png"/>
                        <img class="number-show" src="../../assets/remove.png">
                    </div>
                    <p class="Ibottom">
                        未整改重大隐患
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop">
                        <img src="../../../static/images/index/icon1.png"/>
                        <img class="number-show" src="../../assets/remove.png">
                    </div>
                    <p class="Ibottom">
                        不受控重大危险源
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop">
                        <img src="../../../static/images/index/icon1.png"/>
                        <img class="number-show" src="../../assets/remove.png">
                    </div>
                    <p class="Ibottom">
                        违章超三次人员
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop">
                        <img src="../../../static/images/index/icon1.png"/>
                        <img class="number-show" src="../../assets/remove.png">
                    </div>
                    <p class="Ibottom">
                        未整改重大隐患
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop">
                        <img src="../../../static/images/index/icon1.png"/>
                        <img class="number-show" src="../../assets/remove.png">
                    </div>
                    <p class="Ibottom">
                        违章超三次人员
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop">
                        <img src="../../../static/images/index/icon1.png"/>
                        <img class="number-show" src="../../assets/remove.png">
                    </div>
                    <p class="Ibottom">
                        未整改重大隐患
                    </p>
                </div>
                <div class="newlist">
                    <div class="Itop">
                        <img src="../../../static/images/index/icon1.png"/>
                        <img class="number-show" src="../../assets/add.png">
                    </div>
                    <p class="Ibottom">
                        隐患整改率80%
                    </p>
                </div> -->
             </div>
          </itemList>
      </div>
      <myMenu></myMenu>
  </div>
</template>

<script>
    import myMenu from '@/commonComponents/menu'
    import itemList from "@commonComponents/itemList/itemList"
    import  {Tab, TabItem} from 'vux'
    export default {
         name: "newEdit",
         data(){
           return {
               userInfo: {},
               show:true,
               flag:false,//指标的角标显示类型，true对应删除状态，false对应添加状态
               selecteIndex:0,
               code: this.$route.query.code,//模块类型
               menuList: [],//列表数据，
               totalList: [],//全部指标数据
               codeList: [],//code集合
               isRemove: false,//删减或者增加
           }
         },
         components: {
            itemList,
            Tab,
            TabItem,
            myMenu
         },
         created(){
             this.$vux.loading.show({
                text: 'Loading'
             })
             this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
             this.getData()
         },
         methods: {
             //获取列表数据
           getData(){
             var that = this
                var params = {
                    "allowPaging": true,
                    "business": "GetMainData",
                    "data": {
                        "code": this.code,
                        "type": "1"//编辑
                    },
                    "pageIndex": 0,
                    "pageSize": 0,
                    "tokenId": "",
                    "userId": this.userInfo.userid
                }
                this.$axiosAjax.getConfigJson(params)
                .then((res) =>{
                    // console.log(res)
                    if(res.data.code == 0){
                        that.totalList = res.data.data.all            
                        that.menuList = res.data.data.gr    
                        
                        that.menuList.forEach(
                            (item,index)=>{
                                that.codeList = [...that.codeList,item.Code]
                            }
                        )
                        // console.log(that.codeList)
                    }else{
                        this.$vux.toast.text(res.data.info)
                    }
                }).catch(() =>{

                }).finally(() => {
                    this.$vux.loading.hide()
                })
           },
           //角标显示，个人应用指标有的，所有应用指标显示删除，其余添加
           showcode(code){
               let flag=false;
               this.codeList.forEach((item,index) =>{
                   if(item == code){
                       flag = true;
                   }
               })
               return flag
           },
           //点击个人指标删减
           deletecode (itemList) {
            //console.log(this.codeList,itemList)           
               this.codeList.forEach((item,index) =>{
                   if(item == itemList.Code){
                       this.codeList.splice(index,1)
                       this.menuList.splice(index,1)
                   }
               })
           },
           //点击全部指标状态变化
           changeflag(code){
               var that = this
               let flag = true;
               //在个人应用里面的指标splice删除，不在的点击添加当前项指标
               this.codeList.forEach((item,index) =>{
                    if(item==code){
                        that.codeList.splice(index,1);
                        that.menuList.splice(index,1);
                        flag = false;
                    }
               })
               if(flag){
                    that.codeList = [...that.codeList,code];
                    that.menuList = [...that.menuList,that.totalList[code]];
               }
            },
            //点击保存
            savecode () {
                var codestr = this.codeList.join(',')
                var that = this
                var params = {
                    "allowPaging": false,
                    "business": "SaveMainData",
                    "data": {
                        "code": codestr,
                        "type": this.code
                    },
                    "pageIndex": 0,
                    "pageSize": 20,
                    "tokenId": "",
                    "userId": this.userInfo.userid
                }

                this.$axiosAjax.getConfigJson(params)
                .then((res) =>{
                    // console.log(res)
                    that.$vux.toast.text(res.data.info)
                    this.$router.push('/')
                })
            }
        }        
    }
</script>

<style scoped lang="less">
.workmain{
	width:100%;
  min-height:100%;
  background-color:#ebeef2;
  padding-top:20px;
  .work{
    width:100%;
    min-height:100%;
     filter: url(#goo);
    .newHeader{
       display:flex;
       justify-content: space-between;
       width:100%;
       >.mycode{
          font-size:15px;
          color:#333333;
          font-weight:bold;
          height:20px;
          line-height:20px;
       }
       >.editMsg{
          width:50px;
          height:20px;
          font-size:12px;
          line-height:20px;
          text-align:center;
          border:1px solid #2269ff;
          color:#fff;
          border-radius:10px;
          background-color: #2269ff;
       }
    }
  }
}
.newspan{
  text-align:center;
  font-size:20px;
}
.itemT{
  width:100%;
  display:flex;
  >.newlist{
     width:50px;
     margin-top:16px;
     >.Itop{
       width:28px;
       height:28px;
       margin:0 auto;
       position:relative;
      >img:first-child{
          width:100%;
          height:100%;
       }
       >img:nth-child(2n+2){
          width:50%;
          height:50%;
       }
       >.number-show{
         position:absolute;
         top:0;
         right:0;
        //  height:15px;
        //  width:15px;
        //  border-radius:50%;
        //  background-color:#ff0000;
        //  color:#fff;
        //  font-size:10px;
        //  text-align:center;
        //  line-height:15px;
       }
     }
     >.Ibottom{
       font-size:12px;
       text-align:center;
       line-height:14px;
       margin-top:7px;
     }
  }
}
.itemTnew{
        flex-wrap: wrap;
        margin-top:20px;
}
.itemTnew>.newlist{
     margin-right:44px;
     margin-bottom:15px;
}
.itemTnew>.newlist:nth-child(4n+4){
      margin-right:0;
}
.fixednew{
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  background-color:rgba(0,0,0,.5);
}

.ss_menu{
    bottom: 75px;
    width: 50px;
    height: 50px;
    color: #fff;
    position: fixed;
    transition: all 1s ease;
    right: 30px;
     filter: url(#goo);
}
.share{
    position:absolute;
    top:0;
    left:0;
    width: 50px;
    height: 50px;
    padding:13px;
    background-color:#2269ff;
    border-radius:50%;
    padding:13px;
    >img{
      height:100%;
      width:100%;
    }
}
.firstList{
    filter: url(#goo);
  position:absolute;
  top:0;
  left:0;
  width:50px;
  height:70px;
  transition: all 1s ease;
  .f-icon{
    height:50px;
    width:50px;
    border-radius:50%;
    border:1px solid #2269ff;
    padding:13px;
    background-color:#fff;
      >img{
        height:100%;
          width:100%;
      }
    }
    >.f-word{
      width:70px;
      color:#fff;
      text-align:center;
      font-size:13px;
      height:13px;
      line-height:13px;
      margin-top:6px;
      transform:translate(-10px 0);
    }

}
.firstListnew{
  top:-85px;
  left:0;
}
.twoList{
  top: -37px;
  left:-60px;
}
.threeList{
  top: 37px;
  left:-80px;
}
.lastitem{
  width:100%;
  height:100%;
  background-color:#f4f8ff;
  border-radius:10px;
  border:1px dashed #ccc;
}
.bosafe_itemlist.itemList--new{
  margin-bottom:0;
}
</style>
